import type { UserInfo } from "@/apis/userInfo/type";
import { Button, Col, Form, Input, Modal, Row } from "antd";
import { useEffect, useState } from "react";

export default function AddUser({data,close}:any) {


 
  
  const [form] = Form.useForm();
 
    const [isModalOpen] = useState(true);
 
    // const handleAdd=()=>{
    //   setIsModalOpen(true);
    // }
    // const handleCancel = () => {
    // //   setIsModalOpen(false);

    //           props.close();
    // };
    const onFinish=(values:UserInfo)=>{

      console.log("表单提交",values);

     // 在这里调接口
      

    }

    useEffect(()=>{

     
        data && form.setFieldsValue(data)
     
    
      
    },[])

    // const submit=()=>{
    //   console.log("确定按钮事件");

    //   form.submit();
      
    // }
  return (
    <Modal
    width={800}
    title={data ? '修改居民' : '新增居民'}
    closable={{ 'aria-label': 'Custom Close Button' }}
    open={isModalOpen}
    onOk={form.submit}
    okText="提交"
    cancelText="取消"
    onCancel={()=>close()}
 
  >
    <Form  form={form} onFinish={onFinish}>
    <Row gutter={50} style={{margin:30}}>
      <Col span={12}>
        
      <Form.Item label="头像"></Form.Item>
      <Form.Item label="姓名" name="name"  rules={[{ required: true, message: '请输入姓名!' }]}>
             <Input  placeholder="" />
        </Form.Item>
      </Col>
      <Col span={12}>
        
   
        <Form.Item label="民族" name="nation">
             <Input placeholder="请输入民族" />
        </Form.Item>
        <Form.Item label="籍贯" name="usernative">
             <Input placeholder="" />
        </Form.Item>
      </Col>
    </Row>
    
   
       
    </Form>
  </Modal>
  );
}